body {
    margin:0;
    padding:0;
    font-family:sans-serif;
    background:url('https://images.unsplash.com/photo-1629045198199-555766a7e49f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2113&q=80');
}
.box {
    width:300px;
    padding:40px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#19191900;
    text-align:center;
    box-shadow:20px 25px 45px 15px;
}
.box h1 {
    color:white;
    text-transform:uppercase;
    font-weight:500;
}
.box input[type = "text"],.box input[type = "password"] {
    /*border:0;
    */
    background:none;
    display:block;
    margin:20px auto;
    text-align:center;
    border:2px solid #3498db;
    padding:14px 10px;
    width:200px;
    outline:none;
    color:white;
    border-radius:24px;
    transition:0.25s;
}
.box input[type = "text"]:focus,.box input[type = "password"]:focus {
    width:280px;
    border-color:#2ecc71;
}
.box input[type = "submit"] {
    /* border:0;
    */
    background:none;
    display:block;
    margin:20px auto;
    text-align:center;
    border:2px solid #2ecc71;
    padding:14px 40px;
    outline:none;
    color:white;
    border-radius:24px;
    transition:0.25s;
    cursor:pointer;
}
.box input[type = "submit"]:hover {
    background:#2ecc71;
}
.text1{
    font-family: 楷体, serif;
    font-size: 24px;
    color: aliceblue;
}